<style lang="scss" scoped></style>

<template>
  <div class="root-page">
    <div>Index</div>
    <button class="btn" @click="count += 1">{{ count }}</button>

    <button class="btn" @click="testGet">GetData</button>

    <div class="whitespace-pre p-4">{{ JSON.stringify(res, null, 2) }}</div>

    <button class="btn" @click="router.push({ name: 'main' })">to-main</button>

    <div
      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-y-scroll h-64 w-96 bg-red-50 opacity-0"
      ref="boxRef"
    >
      <p v-for="item in 100" :key="item">{{ item }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
const boxRef = ref()
useSaveScroll(boxRef)

import { TestApi } from '~/api/index'

const router = useRouter()
const { count } = storeToRefs(useGlobal())
const res = ref()
async function testGet() {
  res.value = await TestApi(count.value + '')
}
</script>
